<template>
  <div class="home-item-title">
    <div class="header">
      <span class="title">
        <span class="icon"></span>
        <span class="text">{{ title }}</span>
      </span>
      <span class="more" @click="handleMore">{{ moreText }}<i class="cubeic-arrow"></i></span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['title', 'moreUrl', 'moreText'],
  methods: {
    handleMore() {
      this.$router.push(this.moreUrl)
    }
  }
}
</script>

<style scoped lang="stylus">
.home-item-title
  .header
    height 30px
    //background red
    line-height 30px
    display flex
    justify-content space-between
    .title
      font-size 14px
      color #333
      display flex
      .icon
        width 4px
        height 16px
        margin-top 6.5px
        border-radius 5px
        background $main_color
      .text
        margin-left 5px
        font-weight 700
        letter-spacing 1.5px
    .more
      color #888888
</style>
